<template>
  <div class="input-group">
    <v-header :navdata="navData"></v-header>
    <div class="detail_content">
      <div class="head">
      <span
        style="font-size:18px !important;text-align:center;position: absolute;top:32px;left:0"
        >出库复核</span
      >
      <el-input
        style="width:260px;position: absolute;right:0"
        v-model="tmpData.tmpInput"
        class="button-item"
        placeholder="请扫描"
        id="codeInput"
        @keyup.enter.native="handleAdd"
        ref="customerInput"
      ></el-input>
    </div>
    <br />
    <span>箱码：{{ form.box_code }}</span>
    <span>支码：{{ form.type_code }}</span>
    <div class="show-group">
      <el-table :data="showList" stripe style="width: 100%;" max-height="250">
        <el-table-column
          class="button-item"
          prop="box_code"
          label="箱号"
          min-width="50"
        ></el-table-column>
        <el-table-column
          class="button-item"
          prop="type_code"
          label="新产品代码"
          min-width="100"
        ></el-table-column>
        <el-table-column
          class="button-item"
          prop="number"
          label="数量"
          min-width="50"
        ></el-table-column>
        <el-table-column
          class="button-item"
          prop="date_code"
          label="有效期"
          min-width="60"
        ></el-table-column>
        <el-table-column class="button-item" label="操作" min-width="60">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="delCode(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSSizeChange"
        @current-change="handleSCurrentChange"
        :current-page.sync="query.page"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="query.limit2"
        layout="total,->, prev, pager, next, sizes"
        :total="codes.length"
      ></el-pagination>
      <span slot="footer" class="dialog-footer">
        <el-button @click="doCreates">返 回</el-button>
        <el-button type="primary" @click="doCreate">确 定</el-button>
      </span>
    </div>
    </div>
  </div>
</template>

<script>
import appHeader from "@/components/common/header";
import { getByNo, getBarCode, stockOut } from "@/api/barcode";
import { getXiaoqi } from "@/utils/common";
export default {
  name: "scan",
  data() {
    return {
      navData: [],
      tmpData: { tmpInput: "", lastBoxCode: "",flag:0 },
      form: {
        box_code: "",
        type_code: "",
        date_code: "",
        number: ""
      },
      tableData: [],
      barCode: [],
      total: [],
      postGoods: [],
      query: {
        limit: 5,
        page: 1,
        limit2:10
      },
      codes: [],
      boxNumber:0,
      upBoxCode:[]
    };
  },
  components: {
    "v-header": appHeader
  },
  computed: {
    showList() {
      let offset = this.query.limit * (this.query.page - 1);
      return this.codes.slice(offset, offset + this.query.limit);
    }
  },
  methods: {
    handleAdd() {
      let tit = this.tmpData.tmpInput;
      setTimeout(() => {
        this.$set(this.tmpData, "tmpInput", "");
      }, 100);
      if (!this.form.box_code) {
        if (tit.length > 5) {
            if (!this.tmpData.lastBoxCode) {
                alert("箱码不超过5位！");
                return
            } else {
                this.form.box_code = this.tmpData.lastBoxCode;
                if(this.tmpData.flag == 1){
                   this.form.box_code = "";
                   this.tmpData.lastBoxCode = "";
                   alert("请扫描箱码");
                   return;
                }
            };
        } else {  
              console.log(this.upBoxCode)
              if(this.upBoxCode.includes(tit)){
                alert("同一箱码只能扫一次");
                return;
              };
              this.form.box_code = tit;
              this.tmpData.lastBoxCode = tit;
              this.tmpData.flag = 0;  
              return;
        }
      }

      if (!this.form.type_code) {
        if (tit.length != 23 && tit.length != 13 && tit.length != 14) {
          alert("型号码23位单只码13位或14位！");
          return;
        }
        if (tit.length == 23) {
          this.form.type_code = tit;
          getByNo({ id: this.form.type_code.slice(9, 20) }).then(res => {
            let stringType = this.form.type_code.toString().slice(20,23);
            this.tableData = res.data[0].validity;
            var year =Number(
                    getXiaoqi(
                            tit.slice(3, 7),
                            this.tableData
                    )
            )
            this.postGoods = {};
            this.codes.unshift({
              type_code: this.form.type_code.slice(9, 20),
              number: Number(this.form.type_code.slice(20, 23)),
              date_code: String(year),
              box_code: this.form.box_code,
              id: this.$route.params.id
            });
            this.form.box_code = this.form.type_code = this.form.type_code = this.form.date_code = this.form.number = "";
            this.boxNumber = this.boxNumber+1; 
            for(let i=0;i<res.data[0].units.length;i++){
              if(Object.is(Number(stringType),res.data[0].units[i].number)){
                   let tags = res.data[0].units[i].unit_name;      
                   if(tags == "箱"){   //箱    
                        if(this.tmpData.flag == 2){
                          alert("这是整箱");
                          this.codes.shift();
                          return;
                        }; 
                        if(this.upBoxCode.includes(this.tmpData.lastBoxCode)){
                          console.log(this.upBoxCode)
                          alert("同一箱码只能扫一次");
                          this.codes.shift();
                          this.form.box_code = "";
                          return;
                        }else{
                          this.tmpData.flag = 1; 
                          this.upBoxCode.push(this.tmpData.lastBoxCode);             
                        };                       
                   }else{   //非箱
                       this.tmpData.flag = 2;
                       if(this.upBoxCode.includes(this.tmpData.lastBoxCode)){
                          alert("同一箱码只能扫一次");
                          this.codes.shift();
                          return;
                      }                 
                   };                  
              };        
            };
          });
        } else {
          if (tit.length == 13 || tit.length == 14) {
             this.tmpData.flag = 2;     
              if(this.upBoxCode.includes(this.tmpData.lastBoxCode)){
                          alert("同一箱码只能扫一次");
                          //this.codes.shift();
                          return;
                      }  
            getBarCode({ id: tit }).then(res => {
              if (res.data == "") {
                alert("支码没找到对应的商品！");
                return;
              }
              this.form.type_code = res.data[0].NewPRODUCTCD;
            });
          }
        }
        return;
      }

      if (tit.length != 6) {
        alert("有效期只能是6位！");
        return;
      }
      this.form.date_code = tit;
      this.codes.unshift({
        type_code: this.form.type_code,
        number: 1,
        date_code: this.form.date_code,
        box_code: this.form.box_code,
        id: this.$route.params.id
      });
      this.form.box_code = this.form.type_code = this.form.type_code = this.form.date_code = this.form.number = "";
    },
    delCode(row) {
      this.codes.splice(this.codes.indexOf(row), 1);
      this.upBoxCode.splice(this.codes.indexOf(row),1);
      this.$refs.customerInput.$el.querySelector('input').focus();
    },
    handleSSizeChange: function(val) {
      this.query.limit = val;
    },
    handleSCurrentChange: function(val) {
      this.query.page = val;
    },
    doCreate() {
      stockOut(this.codes).then(res => {
        this.$message({
          message: "复核成功",
          type: "success"
        });
        this.$router.push({
          path: "/barcode/reivew"
        });
      });
    },
    doCreates() {
      this.$router.push({
        path: "/barcode/reivew"
      });
    }
  }
};
</script>

<style lang="less" scoped>
.detail_content{height: auto;}
.layout-header{position: fixed}
// .dialog-footer {
//   position: absolute;
//   top: 340px;
//   right: 12px;
// }
.head {
  width: 100%;
  position: relative;
  height: 60px;
}
.input-group {
  margin: 50px 10px 10px 10px;
  max-width: 750px;
  font-size: 16px;
  height: 100%;
}
.input-group .button-item {
  height: 30px;
  margin: 20px 0;
  font-size: 16px;
}
.input-groud /deep/ .el-input__inner[placeholder="请扫描"] {
  height: 150px !important;
}
.input-groud /deep/ .el-input__inner[placeholder="请扫描"] {
  height: 150px !important;
}
.show-group {
  margin: 30px auto;
  width: 100%;
  font-size: 16px;
}
.show-group .button-item {
  height: 30px;
  margin: 100px 0;
  font-size: 500px;
}
</style>
<style lang="less">
/*.el-input__inner{*/
/*height: 80px !important;*/
/*width: 500px !important;*/
/*}*/
.el-table th > .cell {
  font-size: 14px;
}
.el-table .cell,
.el-table th > div {
  font-size: 14px;
  padding: 0;
  text-align: center;
}
.el-table__header-wrapper {
  height: 45px !important;
}
.el-pagination__total {
  margin: 33px 0 0 0;
}
.btn-prev {
  font-size: 22px !important;
}
.el-pagination__editor {
  font-size: 14px !important;
  padding: 3px 2px;
}
.el-pagination__jump {
  font-size: 14px !important;
  margin: 0 10px;
}
.el-input/deep/ .el-input__inner {
  height: 27px !important;
}
.button-item /deep/.el-input__inner {
  height: 40px !important;
}
.el-pagination {
  padding: 10px 5px;
}
.el-pagination__sizes {
  margin: 0 0 0 20px;
}
</style>
